<template>
  <div
    style="display: flex; justify-content: space-between;margin-top: 80px;margin-bottom: 100px ;padding-left: 40px; padding-right: 50px;">

    <div style="width: 50%;background-color: whitesmoke;">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="检测语言">
          <el-select v-model="form.from" placeholder="请选择活动区域">
            <el-option label="英语" value="英语"></el-option>
            <el-option label="法语" value="法语"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标语言">
          <el-select v-model="form.to" placeholder="请选择活动区域">
            <el-option label="中文" value="中文"></el-option>
            <el-option label="中文" value="中文"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="翻译内容">
          <el-input type="textarea" v-model="form.text" :rows="10"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">智能翻译</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: grid; grid-template-rows: auto auto;">
      <el-card class="box-card">
        <strong>翻译结果</strong>
        {{ textshow }}
      </el-card>
    </div>


  </div>
</template>
  <script>
    export default {
      data() {
        return {
        form: {
          from: '',
          to: '',
          text: ''
        },
        textshow:'你好这里是翻译信息----'
      }
    },
    methods: {
      onSubmit() {
        this.sendDataToServertran();
      },
      async sendDataToServertran() {
  try {
    // 准备发送的数据
    const dataToSend = {
      to:this.form.to,
      from:this.form.from,
      text: this.form.text, // 表单
    };
    // 发送 POST 请求到端口 8081
    const response = await fetch('http://localhost:8081/tran', {
      method: 'POST', // 注意这里改为 POST 请求
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(dataToSend)
    });

    // 解析服务器返回的响应数据
    const data = await response.json();

    console.log('从服务器接收到的信息：', data);//接收
    this.textshow = data.data;
    
  } catch (error) {
    // 处理错误
    console.error('发送数据时出错：', error);
  }
},
    }
  }
  </script>
  <style>
 
</style>